<template>
  <div class="sangou">
    <card title="品牌闪购">
      <template>
        <div class="sangou-content">
          <div class="row">
            <!-- 左侧 -->
              <div class="col-6 sangou-left">
                <img class="sangou-logo" :src="data[0].brands1[0].brand_logo" alt />
                <div class="title">{{data[0].brands1[0].title}}</div>
                <div class="stitle">{{data[0].brands1[0].stitle}}</div>
                <img class="sangou-glogo" :src="data[0].brands1[0].good_logo" alt />
              </div>
            <!-- 右侧 -->
              <div class="col-6 sangou-right">
                <ul>
                  <li v-for="(item, index) in data[0].brands2" :key="index">
                    <img :src="item.brand_logo" alt />
                    <p>{{item.title}}</p>
                  </li>
                </ul>
              </div>
          </div>
        </div>
      </template>
    </card>
  </div>
</template>

<script>
import Card from "~/components/Card";

export default {
  components: {
    Card
  },
  props: {
    data: {
      type: Array,
      required: true
    }
  }
};
</script>

<style lang="scss">
.sangou {
  &-content {
    padding: 0 15px 11px 15px;
  }
  &-left {
    padding: 14px 0 !important;
    text-align: center;
    background: #f9fcf9;
    .title {
      margin: 5px 0;
      font-size: 16px;
    }
    .stitle {
      margin: 10px 0 10px;
    }
    .sangou-logo {
      width: 100px;
    }
    .sangou-glogo {
      width: 42%;
    }
  }
  &-right {
    padding: 20px 0 !important;
    ul {
      margin-top: -20px;
    }
    li {
      position: relative;
      margin-top: 20px;
      float: left;
      width: 50%;
      text-align: center;
      img {
        width: 60%;
        margin-bottom: 10px;
      }
      &:nth-child(odd)::after {
        content: '';
        position: absolute;
        top: 10px;
        right: 0;
        display: inline-block;
        width: 1px;
        height: 50px;
        background-image: radial-gradient(#ddd, #fff);
      }
    }
  }
}

</style>